<template>
	<view class="activateMembership">
		<view class="header">
			<view class="left">
				<image :src="info.portrait" mode=""></image>
				<view class="info">
					<view class="top">
						{{info.nickName}} <text class="u-p-l-16">({{info.mobile}})</text>
					</view>
					<view class="bot">
						ID：{{info.memberNo}}
					</view>
				</view>
			</view>
		</view>

		<u-form class="form" :model="model" :rules="rules" ref="uForm" label-position="top">
			<view class="infoPrev">
				<view class="line">
					<view class="left">
						姓名
					</view>
					<view class="right">

						<u-form-item :border-bottom="false" prop="certName">
							<u-input maxlength="20" placeholder="请输入姓名" v-model="model.certName" type="text" />
						</u-form-item>

						<!-- <u-input placeholder="请输入姓名" v-model="certName" type="text" /> -->
					</view>
				</view>
				<view class="line">
					<view class="left">
						身份证号
					</view>
					<view class="right">

						<u-form-item :border-bottom="false" prop="certificateNo">
							<u-input maxlength="18" placeholder="请输入身份证号" v-model="model.certificateNo" type="text" />
						</u-form-item>

						<!-- <u-input placeholder="请输入身份证号" v-model="certificateNo" type="text" /> -->
					</view>
				</view>

			</view>
		</u-form>
		<view class="dif">
			<view class="title">
				认证类型
			</view>
			<view class="radios">
				<view @click="tab(index,item)" :class="[cur==index?'active':'']" v-for="(item,index) in radiosList"
					class="items">
					<view class="icon">

					</view>
					{{item.name}}
				</view>
			</view>
		</view>
		<!-- 服务内容 -->
		<view class="dif">
			<view class="title">
				认证备注
			</view>
			<view class="intro intro1">
				<view style="height: 132rpx;">
					<u-input placeholder="填写备注内容" :border="false" :maxlength="300" :height="120" :auto-height="false"
						v-model="remark" type="textarea" />

				</view>
				<view class="max">
					{{remark.length}}/300
				</view>
			</view>
		</view>

		<!-- 	<view class="photos">
			<view class="tit">
				<view class="left">
					<text>APP展示照片上传</text>
				</view>

			</view>
			<view class="">
				<u-upload :width="148" :height="148" maxCount="1" ref="uUpload" :show-progress="false"
					:action="`https://api-test.sixbg.com/oss/file/upload`" :auto-upload="true" @on-remove="onRemove2"
					:file-list="fileList2" @on-success="successUpload2" :form-data="{groupName :'coverImg'}">
				</u-upload>
			</view>

		</view>
 -->
		<!-- 附件上传 -->
		<view class="photos">
			<view class="tit">
				<view class="left">
					<text>附件上传</text>
					<text>（最多3张）</text>
				</view>

			</view>
			<view class="">
				
				<u-upload :width="148" :height="148" maxCount="3" ref="uUpload" :show-progress="false"
					:action="`https://api-test.sixbg.com/oss/file/upload`" :auto-upload="false"
					@on-uploaded="onuploaded" @on-list-change="onchange" @on-remove="onRemove1" :file-list="fileList1"
					@on-success="successUpload1" :form-data="{groupName :'coverImg'}">
				</u-upload>
				<!-- <u-upload :width="148" :height="148" maxCount="3" ref="uUpload" :show-progress="false"
					:action="`https://api-test.sixbg.com/oss/file/upload`" :auto-upload="true" @on-remove="onRemove1"
					:file-list="fileList1" @on-success="successUpload1" :form-data="{groupName :'coverImg'}">
				</u-upload> -->
			</view>

		</view>


		<view class="botBox">

			<view class="item1">
				<u-button :disabled="btnFlags" shape="circle" type="error" @click="submit" :ripple="true" ripple-bg-color="#d7d8da">提交
				</u-button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadFlag: false,
				btnFlags: false,
				model: {
					certificateNo: '',
					certName: ""
				},
				rules: {
					certificateNo: [{
							required: true,
							message: '请输入身份证号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.idCard(value);
							},
							message: '身份证号输入有误',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					certName: [{
							required: true,
							// min: 10, max: 500,
							message: '请输入姓名',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								var pattern = /^[\u4e00-\u9fa5a-zA-Z]+$/;
								    return pattern.test(value);
								// return this.$u.test.idCard(value);
							},
							message: '只能输入中文或字母',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
				},
				authType: '',
				certName: '',
				certificateNo: "",
				// certName: '张三',
				// certificateNo: "440723195202040025",
				remark: '',
				cur: 0,
				fileList11: [],
				fileList1: [],
				info: null,
				radiosList: [],
				showImage: '',
				fileList22: [],
				fileList2: [],
				keyword: '',

			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);

		},
		onLoad(e) {

			this.getallAuthTypes() //认证类型集合
			this.memberGetFn(e)
			this.keyword = e.keyword

		},
		methods: {
			memberGetFn(e) {
				this.$u.api
					.memberGet({
						keyword: e.keyword,
						type: 'AUTH'
					})
					.then((res) => {
						console.log(res?.data, 77777);
						this.info = res?.data

					});
			},
			getallAuthTypes() {
				this.$u.api
					.allAuthTypes()
					.then((res) => {
						this.radiosList = res.data

						this.authType = res?.data?. [0]?.code
					});
			},
			
			onchange(lists, name) {
				if (lists.length) {
					this.loadFlag = true
				}
				console.log(lists, name, 333);
			},
			onuploaded(lists, name) {
				if (lists.length) {
					this.fileList11 = lists?.map(r => {
						return r?.response?.data
					})
					let query = {
						memberId: this.info.id,
						authType: this.authType,
						description: this.remark,
						// showImage: this.showImage,
						certName: this.model.certName,
						certificateNo: this.model.certificateNo,
						fileList: this.fileList11
					}
					
					this.$u.api
						.authRecordAdd(query)
						.then((res) => {
							if (res.code == 'ok') {
								this.loadFlag = false
								this.btnFlags = false
								uni.hideLoading()
								uni.redirectTo({
									url: "/subPack/components/suc?type=1"
								})
							} else {
								this.loadFlag = false
								this.btnFlags = false
								uni.hideLoading()
								uni.showToast({
									icon: 'none',
									title: res.msg,
									duration: 5000
								})
							}
						});
			
			
				} else {
			
					let query = {
						memberId: this.info.id,
						authType: this.authType,
						description: this.remark,
						// showImage: this.showImage,
						certName: this.model.certName,
						certificateNo: this.model.certificateNo,
						fileList: this.fileList11
					}
					
					this.$u.api
						.authRecordAdd(query)
						.then((res) => {
							if (res.code == 'ok') {
								this.loadFlag = false
								this.btnFlags = false
								uni.hideLoading()
								uni.redirectTo({
									url: "/subPack/components/suc?type=1"
								})
							} else {
								this.loadFlag = false
								this.btnFlags = false
								uni.hideLoading()
								uni.showToast({
									icon: 'none',
									title: res.msg,
									duration: 5000
								})
							}
						});
			
					
				}
			
			
			},

			submit() {


				// if (!this.authType) {
				// 	this.$u.toast('认证类型不可为空');
				// 	return
				// }

				// if (!this.certName) {
				// 	this.$u.toast('身份证姓名不可为空');
				// 	return
				// }

				// if (!this.$u.test.idCard(this.certificateNo)) {
				// 	this.$u.toast('身份证号输入有误');
				// 	return
				// }
				// if (!this.showImage) {
				// 	this.$u.toast('APP展示照片不可为空');
				// 	return
				// }



				this.$refs.uForm.validate(valid => {
					if (valid) {
						
						
						if (this.loadFlag) {
							this.$refs.uUpload.upload();
							uni.showLoading({
								title: '加载中...'
							})
							this.btnFlags = true
						} else {
							this.$refs.uUpload.upload();
						}

						// let query = {
						// 	memberId: this.info.id,
						// 	authType: this.authType,
						// 	description: this.remark,
						// 	// showImage: this.showImage,
						// 	certName: this.model.certName,
						// 	certificateNo: this.model.certificateNo,
						// 	fileList: this.fileList11
						// }

						// this.$u.api
						// 	.authRecordAdd(query)
						// 	.then((res) => {
						// 		if (res.code == 'ok') {
						// 			uni.redirectTo({
						// 				url: "/subPack/components/suc?type=1"
						// 			})
						// 		} else {
						// 			uni.showToast({
						// 				icon: 'none',
						// 				title: res.msg,
						// 				duration: 5000
						// 			})
						// 		}
						// 	});

					} else {

					}
				});




			},

			tab(index, item) {
				console.log(item, 777777);
				this.cur = index
				this.authType = item?.code
			},

			successUpload1(data, index, lists) {
				let url = data.data;
				this.fileList11.push(url);
			},
			onRemove1(index) {
				this.fileList11.splice(index, 1);
			},
			// successUpload2(data, index, lists) {
			// 	let url = data.data;
			// 	this.fileList22.push(url);
			// 	this.showImage = JSON.parse(JSON.stringify(this.fileList22))?. [0];
			// },
			onRemove2(index) {
				this.fileList22.splice(index, 1);
				this.showImage = JSON.parse(JSON.stringify(this.fileList22))?. [0]
			},
		}
	}
</script>

<style scoped lang="scss">
	/deep/ .u-form-item {
		padding: 0 !important;
	}

	/deep/ .u-input__textarea {
		height: 66px !important;
		text-align: left !important;
	}

	.activateMembership {
		padding: 0 40rpx;

		.radios {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
			font-weight: 400;
			font-size: 28rpx;
			color: #0F1417;
			line-height: 33rpx;
			padding-right: 50rpx;

			.items {
				display: flex;
				align-items: center;

				.icon {
					display: block;
					width: 32rpx;
					height: 32rpx;
					margin-right: 24rpx;
					background: url('https://oss.6mate.cn/mini/nocheck1.png') no-repeat;
					background-size: cover;
				}

				&.active {
					.icon {
						background: url('https://oss.6mate.cn/mini/check1.png') no-repeat;
						background-size: cover;
					}
				}
			}
		}

		.botBox {
			padding: 42rpx 0;

			.item1 {
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				box-shadow: 0rpx 20rpx 24rpx 0rpx rgba(181, 36, 44, 0.2);
			}
		}

		.intro {

			padding: 6rpx 16rpx 0;

			background: #F1F1F1;
			border-radius: 10rpx 10rpx 10rpx 10rpx;

			&.intro1 {
				height: 176rpx;
				// margin-top: 24rpx;
			}

			/deep/ .u-input__input {
				text-align: left !important;
				// margin-right: 24rpx;
			}

			/deep/ textarea,
			uni-textarea {
				height: 60px;
			}

			.max {
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 24rpx;
				color: rgba(15, 20, 23, 0.4);
				line-height: 28rpx;
				text-align: right;
			}
		}

		.photos {
			background: #FFFFFF;
			padding: 24rpx 0 0;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			// margin-bottom: 24rpx;

			.open {
				margin-top: 16rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 28rpx;
				color: #0F1417;
				line-height: 33rpx;
			}

			.tit {
				margin-bottom: 18rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;

					>text:nth-child(1) {
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 500;
						font-size: 28rpx;
						color: #0F1417;
						line-height: 40rpx;
					}

					>text:nth-child(2) {
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 24rpx;
						color: rgba(15, 20, 23, 0.4);
						line-height: 28rpx;
					}
				}

				.right {
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 24rpx;
					color: rgba(15, 20, 23, 0.4);
					line-height: 28rpx;
				}
			}
		}

		.title {
			padding: 24rpx 0 16rpx;
		}

		.infoPrev {
			padding: 8rpx 0;

			.line {
				padding: 14rpx 0;
				border-bottom: 2rpx solid #F5F5F5;
				// margin-bottom: 16rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 28rpx;
					color: #0F1417;
					line-height: 33rpx;
				}

				.right {
					flex: 1;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 28rpx;
					color: #0F1417;
					line-height: 33rpx;
					text-align: right;

					/deep/ .u-input__input {
						text-align: right !important;
					}
				}
			}
		}

		// border-bottom: 2rpx solid #F5F5F5;

		.header {
			padding-bottom: 24rpx;

			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				image {
					width: 93rpx;
					height: 93rpx;
					margin-right: 26rpx;
					border-radius: 50%;
				}

				.info {
					flex: 1;

					.top {
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 28rpx;
						color: #0F1417;
						line-height: 40rpx;
						margin-bottom: 8rpx;
					}

					.bot {
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 24rpx;
						color: rgba(15, 20, 23, 0.6);
					}
				}
			}

			.tags {
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 24rpx;
				color: #0F1417;
				line-height: 20rpx;
				color: #0F1417;
				background: #EDEFF0;
				border-radius: 48rpx 48rpx 48rpx 48rpx;
				padding: 8rpx 16rpx;

				&.base {
					color: #E7EDF4 !important;
					background: #252E3C !important;
				}

				&.golden {
					color: #FFE1CF !important;
					background: #A06D08 !important;
				}

				&.baijin {
					color: #FFE1CF !important;
					background: #4B1C00 !important;
				}

				&.zuanshi {
					color: #D0EAF9 !important;
					background: #3E5980 !important;
				}
			}
		}
	}
</style>
